import {ModalForm, ProFormSelect, ProFormText} from '@ant-design/pro-components';
import React from 'react';

export type UserFormProps = {
  onCancel: (flag?: boolean, formVals?: API.UserDTO) => void;
  onSubmit: (values: API.UserDTO) => Promise<void>;
  updateModalOpen: boolean;
  values?: Partial<API.UserDTO>;
  title?:string;
};

const CreateOrUpdateForm: React.FC<UserFormProps> = (props) => {

  return (<ModalForm
      title={props?.title}
      layout={"horizontal"}
      width="700px"
      labelAlign={"right"}
      labelCol={{span: 6}}
      open={props.updateModalOpen}
      onFinish={props.onSubmit}
      modalProps={{destroyOnClose: true, onCancel: () => props.onCancel()}}
    >
      <ProFormText initialValue={props?.values?.id} hidden={true} name='id'/>
      <ProFormText
        initialValue={props.values?.name}
        rules={[
          {
            required: true,
            message: '用户名不能为空',
          },
        ]}
        width="md"
        label="用户名"
        name="name"
      />
      <ProFormText.Password
        initialValue={props.values?.password}
        rules={[
          {
            required: true,
            message: '密码不能为空',
          },
        ]}
        width="md"
        label="密码"
        name="password"
      />
      <ProFormText.Password
        initialValue={props.values?.rePassword}
        rules={[
          {
            required: true,
            message: '重复输入密码不能为空',
          },
        ]}
        width="md"
        label="重复输入密码"
        name="rePassword"
      />
      <ProFormText
        initialValue={props.values?.department}
        width="md"
        label="部门"
        name={["department"]}
      />
      <ProFormText
        initialValue={props.values?.realName}
        width="md"
        label="真实姓名"
        name={["realName"]}
      />
      <ProFormSelect
        initialValue={props.values?.authorizeType}
        width="md"
        label="权限选择"
        name={["authorizeType"]}
        options={[
          {
            label: '超级管理员',
            value: 'ADMIN',
          },
          {
            label: '普通用户',
            value: 'OPERATOR',
          },
        ]}
      />
    </ModalForm>
  );
};

export default CreateOrUpdateForm;
